﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../static/css/cloud-admin.css" >
	<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="../../static/css/iotxstyle.css" >
</head>
<body>
<!-- PAGE -->
<section>
	<!-- welcome -->
				<div class="col-md-4 col-md-offset-4">
					<div class="welcome-box-plain">
							<div class="guide">
								<div class="step-img">
									<div class="step-first" >
										<img src="../../static/img/step-1.png">
									</div>
									<div class="step-arrow">
										<img src="../../static/img/arrow-1.png">
									</div>
									<div class="step-second" >
										<img src="../../static/img/step-22.png">
									</div>
									<div class="step-arrow">
										<img src="../../static/img/arrow-1.png">
									</div>
									<div class="step-third" >
										<img src="../../static/img/step-23.png">
									</div>
									<div class="step-arrow">
										<img src="../../static/img/arrow-1.png">
									</div>
									<div class="step-forth" >
										<img src="../../static/img/step-24.png">
									</div>
								</div>
								<div class="stepdetail">
									<div class="stepdetail-one">
										Network Connection
									</div>
									<div class="stepdetail-two">
										User Information
									</div>
									<div class="stepdetail-three">
										Server Settings
									</div>
									<div class="stepdetail-four">
										Dusts Settings
									</div>
								</div>
								<div class="step-title">
									<div class="steptitle-one">
										Step 1
									</div>
									<div class="steptitle-two">
										Step 2
									</div>
									<div class="steptitle-three">
										Step 3
									</div>
									<div class="steptitle-four">
										Step 4
									</div>
								</div>
								<div class="step-line">
									<img src="../../static/img/step-line.png" style="width: 97%">
								</div>
							</div>
							<div class="connect">
								<div class="connectway">
									<div class="selectconnect">
										Nerwork Pattern
									</div>
									<div class="selectoption">
									<input type="checkbox" checked="true" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
									<div class="optionway" >WLAN</div>
									</div>
									<div class="selectoption">
										<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
										<div class="optionway" >Mobile Network</div>
									</div>
								</div>
								<img class="connectline" src="../../static/img/connectline.png">
								<div class="connectdetail">
									<div class="connecttitle">
										Available WLAN
									</div>
                                         {% for item in wifiList %}
                                        {% if item==wifiList[-1] %}
                                      <div id="availableconnect_{{ item }}" class="availableconnectbottom">
										<img class="wifipng" src="../../static/img/wifi.png">
										<div class="wifi-guide">{{ item }}</div>
										<button class="connectbutton" id="connectbutton_{{ item }}">connect</button>
									</div>
									<div id="passwordtextnone_{{ item }}" class='passwordtextnone'>
										<label class="passwordtitle">password:</label>
										<input type="password" class="form-control">
									</div>
                                            {% else %}
                                            <div id="availableconnect_{{ item }}" class="availableconnect">
										<img class="wifipng" src="../../static/img/wifi.png">
										<div class="wifi-guide">{{ item }}</div>
{#										<div class="wifi-detail">Encryted</div>#}
										<button class="connectbutton" id="connectbutton_{{ item }}">connect</button>
									</div>
									<div id="passwordtextnone_{{ item }}" class='passwordtextnone'>
										<label class="passwordtitle">password:</label>
										<input type="password" class="form-control">
									</div>
                                        {% endif %}
                                    {% endfor %}
								</div>

							</div>
							<div class="next">
								<button id="nextbutton" class="nextbutton">NEXT</button>
							</div>
					</div>
				</div>
	<!--/welcome -->
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../static/js/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../static/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../static/bootstrap-dist/js/bootstrap.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../static/js/script.js"></script>
<script>
    jQuery(document).ready(function() {
		$('#nextbutton').click(function(){
			window.location.href='/guide/userInfo';
		});
        $("#checkbox-1-1").click(function(){
            alert($(this).prop('checked'));
            if($(this).prop('checked')==true){
				$('.connectdetail').css('display','block');
            }else{
                $('.connectdetail').css('display','none');
            }
        });
        $("#checkbox-1-2").click(function(){
                //window.location.href='guidesecond.html';
        });
        //wifiList点击事件
        $('.availableconnect').click(function(){
            var id = $(this).attr("id")
            //先关闭最后一项
            if($(".availableconnectbottom").next().css("display") == 'block'){

                $(".availableconnectbottom").next().css('display','none');
                 $(".availableconnectbottom").find(".connectbutton").text('connect');
                 $(".availableconnectbottom").find(".connectbutton").css('color','#C8E3ED');
                 $(".availableconnectbottom").find(".connectbutton").css('background','#3E8CCE');
            }
            //除去当前项
            $('.availableconnect').each(function () {
                if(id != $(this).attr("id") &&$(this).next().css('display')=='block'){
                    $(this).next().css('display','none');
                    $(this).find('.connectbutton').text("connect");
                    $(this).find(".connectbutton").css('color','#C8E3ED');
                    $(this).find(".connectbutton").css('background','#3E8CCE');
                }
            });


            if($(this).next().css('display')=='block'){
                $(this).next().css('display','none');
                $(this).find('.connectbutton').text("connect");
                $(this).find(".connectbutton").css('color','#C8E3ED');
                $(this).find(".connectbutton").css('background','#3E8CCE');
            }else{
                $(this).next().css('display','block');
                $(this).find('.connectbutton').text("stop");
                $(this).find(".connectbutton").css('color','black');
                $(this).find(".connectbutton").css('background','#FCFCFC');
                $(this).find(".connectbutton").css('border','solid #D1D1D1 1px');
            }
        });

        $('.availableconnectbottom').click(function(){
            //关闭其他项目
            $('.availableconnect').each(function () {
                if($(this).next().css('display')=='block'){
                    $(this).next().css('display','none');
                    $(this).find('.connectbutton').text("connect");
                    $(this).find(".connectbutton").css('color','#C8E3ED');
                    $(this).find(".connectbutton").css('background','#3E8CCE');

                }
            });

            if($(this).next().css('display')=='none'){
                $(this).next().css('display','block');
                $(this).find(".connectbutton").text('stop');
                $(this).find(".connectbutton").css('color','black');
                $(this).find(".connectbutton").css('background','#FCFCFC');
                $(this).find(".connectbutton").css('border','solid #D1D1D1 1px');
            }
            else if($(this).next().css('display')=='block'){
                $(this).next().css('display','none');
                 $(this).find(".connectbutton").text('connect');
                 $(this).find(".connectbutton").css('color','#C8E3ED');
                 $(this).find(".connectbutton").css('background','#3E8CCE');
			}
        });


        //连接框
{#        $(".connectbutton").click(function () {#}
{#            if($(this).text()=='connect'){#}
{#            $(this).text("stop");#}
{#            $(this).css('color','black');#}
{#            $(this).css('background','#FCFCFC');#}
{#            $(this).css('border','solid #D1D1D1 1px');#}
{#            }else{#}
{#                $(this).text("connect");#}
{#                $(this).css('color','#C8E3ED');#}
{#                $(this).css('background','#3E8CCE');#}
{#			}#}
{#        });#}

    });
</script>
</body>
</html>